<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<title>绑定邮箱</title>
		<link rel="stylesheet" href="../../../css/mui.min.css">
		<link rel="stylesheet" href="../../../css/app.css">
		<style>
			input{border-radius:0!important;}
			input[type=text]{border: 0;border-bottom: 0.01rem solid #eeeeee;margin-bottom: 0;}
			body{background: #fff;}
			.save{width: 6rem;height: 0.68rem;background: #117afd;font-size: 0.3rem;color: #fff;border: none;outline: none;position: absolute !important;top:5.2rem  !important;left: 0.75rem !important;border-radius: 0.1rem;}
			.info{width: 100%;height: 1.34rem;/*position: absolute;left: 0;*/border-bottom: 0.01rem solid #eeeeee;text-align: center;line-height: 2.34rem;color: #666666;font-size: 0.28rem;}
			.tel,.key,.psd{width: 100%;height: 0.8rem;/*position: absolute;top: 1.34rem;left: 0;*/border: none;border-bottom: 0.01rem solid #e2e2e2;padding-left: 0.36rem;font-size: 0.26rem;}
			input::-webkit-input-placeholder{font-size: 0.26rem;color: #999999;}
			/*.key{top:2.16rem;}*/
			.psd{/*top:2.96rem;*/border: none!important;border-bottom: 1px solid #eeeeee!important;}
			.submit{width: 1.8rem !important;padding: .08rem 0!important; background: #117afd !important;font-size: 0.24rem !important;color: #fff !important;position: absolute !important;top:.12rem!important;right:0.4rem !important;border-bottom: 1px solid #e2e2e2;}
			.input_code{position: relative; width: 7.5rem;}
			.pro_box input{padding:.08rem .25rem!important;}
		</style>
	</head>
	<body>
		<!--<div class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<a class="back">返回</a>
			<h1 class="mui-title">绑定手机</h1>
		</div>-->
		<div class="info"><!--您当前未绑定邮箱--></div>
		<div class="pro_box">
			<input type="text" name="" id="email" value="" class="tel" placeholder="请输入邮箱地址" />
			<div class="input_code">
				<input type="text" name="" id="confirm" value="" class="key" placeholder="请输入邮箱验证码" />
				<input type="submit" value="发送验证码" class="submit" />				
			</div>
			<input type="password" name="" id="psd" value="" class="psd" placeholder="请输入登录密码(非邮箱密码)" />
			<button class="save">提交</button>			
		</div>
	</body>
	<script src="../../../js/mui.min.js"></script>
	<script src="../../../js/common.js"></script>
	<script src="../../../js/md5.min.js"></script>
	<script src="../../../js/app.js"></script>
	<script>
		var checkCode = '';
		document.querySelector('.submit').addEventListener('tap',function(){
			var email = document.getElementById('email').value;
			if (isEmail(email)) {//邮箱格式
				//验证邮箱
				utils.ajax('appUserInfo/verifyEmail.do',function(data){
					var data = JSON.parse(data);
					if (data.state == '1') {
						//发送验证码
						utils.ajax('appUserInfo/sendEmailCode.do',function(data){
							var data = JSON.parse(data);
							if(data.state == '1') {//成功
								mui.toast('验证码已发送, 请注意查收！');
								checkCode = data.code;
								if(data.zdht != undefined && data.zdht == '1'){ //判断自动回填参数值
									document.getElementById('confirm').value = data.code;
								}
							} else {
								mui.toast(data.result);
							}
						},"email="+email,null,function(){
							mui.toast('抱歉，当前服务不可用，请稍后再试！');
						});
					} else {
						mui.toast(data.msg);
					}
				},"email="+email,null,function(){
					mui.toast('邮箱校验抱歉，当前服务不可用，请稍后再试');
				})
				
			} else {
				mui.toast('邮箱不正确');
			}
			
			
		});
		document.querySelector('.save').addEventListener('tap',function(){
			var email = document.getElementById('email').value;
			if(!email || !isEmail(email)){
				mui.toast('请输入正确的邮箱！');
				return;
			}
			var confirmNum = document.getElementById('confirm').value;
			if(!confirmNum){
				mui.toast('请输入验证码！');
				return;
			}
			if (confirmNum != checkCode) {
				mui.toast('验证码不正确！');
				return;
			}
			var psd = document.getElementById('psd').value;
			var params = {"email":email,"userId":getUserId(),"psd":md5(psd)};
			utils.ajax('appUserInfo/bindEmail.do',function(data){
				var data = JSON.parse(data);
				if (data.state == '1') {
					location.href = 'mailSuccess.html';
				} else {
					mui.toast(data.msg);
				}
			},jsonToParams(params),null,function(){
				mui.toast('抱歉，当前服务不可用，请稍后再试');
			})
		})
	</script>
</html>